<template>
  <div class="com">
    <span class="fs-xxs c-primary" @tap.stop="isShowPanel = true">录制声音</span>
    <i class="fi icon-maikefeng1 c-primary" @tap.stop="isShowPanel = true"></i>
    <div v-if="isShowPanel" class="panel ripple" :class="{'shake': isPanelAnm}">
      <div class="panel-bd" style="padding-bottom: 20px;padding-top: 20px;">
        <div class="fs-xh pdb-s" :class="{'c-gray': status != 'recording'}" style="font-weight:300;">
          {{recordTimeTip}}
        </div>
        <div class="handle">
          <div v-if="status == 'unrecord'" class="handle-inner" @tap.stop="status = 'recording'">
            录音
          </div>
          <div v-if="status == 'recording'" class="handle-inner" @tap.stop="status = 'record-done'">
            结束
          </div>
          <div v-if="status == 'record-done'" class="handle-inner">
            结束
          </div>
        </div>
        <div class="close" @tap.stop="status = 'record-cancel'"><i class="if icon-close"></i></div>
      </div>
    </div>
    <file-upload :path="tempFilePath"
      :size="fileSize" :meta="{duration}"
      dir="materials/audios"
      @back="onUploadBack"
      @success="onUploadSuccess"></file-upload>
  </div>
</template>

<script>
import { genNo } from '../utils/helper'
import FileUpload from './file-upload'
const MAX_DURATION = 580000
export default {
  props: {},
  data() {
    return {
      isShowPanel: false,
      status: 'unrecord',
      tempFilePath: '',
      recordSeconds: 0,
      fileSize: 0,
      duration: 0,
      isPanelAnm: false
    }
  },
  components: {
    FileUpload
  },
  computed: {
    recordTimeTip() {
      let lf = Math.round(this.recordSeconds)
      let s = lf % 60
      let m = Math.round(lf / 60)
      if (s < 10) s = '0' + s
      if (m < 10) m = '0' + m
      return `${m} : ${s}`
    }
  },
  async mounted() {
    this.init()
  },
  methods: {
    onUploadBack () {
      wx.hideLoading()
    },
    reset () {
      this.status = 'unrecord'
      this.tempFilePath = ''
      this.recordSeconds = 0
      this.fileSize = 0
      this.duration = 0
    },
    onUploadSuccess(materials) {
      this.reset()
      this.isShowPanel = false
      this.$emit('ok', materials)
    },
    init() {
      this.audio = wx.getRecorderManager()
      this.audio.onStart(() => {})
      this.audio.onStop(res => {
        if (this.status === 'record-cancel') return
        wx.showLoading({mask: true})
        this.tempFilePath = res.tempFilePath
        this.fileSize = res.fileSize
        this.duration = res.duration
      })
    }
  },
  watch: {
    recordSeconds(nv) {
      if (nv >= MAX_DURATION / 1000) {
        this.status = 'record-done'
      }
    },
    isShowPanel (nv) {
      if (!nv) {
        this.$emit('close')
        return
      }

      setTimeout(() => {
        this.isPanelAnm = true
      }, 1000)

      this.$emit('open')
      this.reset()
      this.status = 'recording'
    },
    async status(nv) {
      this.$emit('status-change', nv)
      if (this.it) clearInterval(this.it)

      if (nv === 'recording') {
        this.$emit('start')
        this.recordSeconds = 0
        this.it = setInterval(() => {
          this.recordSeconds++
        }, 1000)
        this.audio.start({
          duration: MAX_DURATION,
          sampleRate: 44100,
          numberOfChannels: 1,
          encodeBitRate: 192000,
          format: 'aac',
          frameSize: 50
        })
      } else if (nv === 'record-done') {
        this.audio.stop()
      } else if (nv === 'record-cancel') {
        this.audio.stop()
        this.isShowPanel = false
      }
    }
  }
}
</script>

<style scoped lang="less">
@import '../assets/less/var.less';
.panel {
  position: fixed;
  background-color: rgba(0,0,0,.5);
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 1000;
  box-sizing: border-box;
  &-bd {
    background-color: white;
    position: absolute;
    bottom: 0;
    width: 100%;
    text-align: center;
  }
}
.handle {
  width: 120px;
  height: 120px;
  background-color: lighten(@colorPrimary, 50%);
  color: @colorWhite;
  margin: 0 auto;
  border-radius: 50%;
  font-size: 2.8 * @baseSize;
  position: relative;
  box-sizing: border-box;
  &-inner {
    box-sizing: border-box;
    line-height: 100px;
    display: block;
    position: absolute;
    left: 10px;
    top: 10px;
    width: 100px;
    height: 100px;
    background-color: @colorPrimary;
    border-radius: 50%;
    z-index: 0;
    &:active {
      background-color: darken(@colorPrimary, 10%);
    }
  }
}
i {
  font-size: 3 * @baseSize;
}
.close {
  position: absolute;
  right: 10px;
  top: 10px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  line-height: 40px;
  z-index: 1001;
  i {
    line-height: 40px;
    color: @colorRed;
    font-size: 2 * @baseSize;
  }
}
</style>
